<template>
  <el-dialog
    v-model="dialogVisible"
    :title="solution?.title"
    width="70%"
    class="solution-dialog"
    destroy-on-close
  >
    <div v-if="solution" class="solution-detail">
      <!-- 方案概述 -->
      <section class="detail-section overview-section">
        <div class="section-header">
          <h3>方案概述</h3>
          <div class="divider"></div>
        </div>
        <div class="section-content">
          <p>{{ solution.fullDescription || solution.description }}</p>
        </div>
      </section>

      <!-- 应用场景 -->
      <section class="detail-section scenes-section" v-if="solution.scenes?.length">
        <div class="section-header">
          <h3>应用场景</h3>
          <div class="divider"></div>
        </div>
        <div class="section-content">
          <el-row :gutter="20">
            <el-col :span="8" v-for="(scene, index) in solution.scenes" :key="index">
              <div class="scene-card">
                <div class="scene-icon">
                  <el-icon><component :is="scene.icon" /></el-icon>
                </div>
                <h4>{{ scene.title }}</h4>
                <p>{{ scene.description }}</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>

      <!-- 技术特点 -->
      <section class="detail-section features-section" v-if="solution.techFeatures?.length">
        <div class="section-header">
          <h3>技术特点</h3>
          <div class="divider"></div>
        </div>
        <div class="section-content">
          <el-row :gutter="20">
            <el-col :span="12" v-for="(tech, index) in solution.techFeatures" :key="index">
              <div class="tech-feature">
                <div class="feature-icon">
                  <el-icon><component :is="tech.icon" /></el-icon>
                </div>
                <div class="feature-content">
                  <h4>{{ tech.title }}</h4>
                  <p>{{ tech.description }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>

      <!-- 联系我们 -->
      <section class="detail-section contact-section">
        <div class="contact-content">
          <h3>了解更多详情</h3>
          <p>如果您对该解决方案感兴趣，欢迎联系我们获取更多信息</p>
          <router-link to="/contact" class="contact-btn">
            <span>联系我们</span>
            <el-icon><ArrowRight /></el-icon>
          </router-link>
        </div>
      </section>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  solution: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})
</script>

<style lang="scss" scoped>
.solution-dialog {
  :deep(.el-dialog__header) {
    padding: 30px;
    margin: 0;
    border-bottom: 1px solid #eee;
    
    .el-dialog__title {
      font-size: 24px;
      font-weight: 700;
      color: #2c3e50;
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 0;
  }
  
  .solution-detail {
    .detail-section {
      padding: 30px;
      
      &:not(:last-child) {
        border-bottom: 1px solid #eee;
      }
      
      .section-header {
        margin-bottom: 25px;
        
        h3 {
          font-size: 20px;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 15px;
        }
        
        .divider {
          width: 40px;
          height: 4px;
          background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
          border-radius: 2px;
        }
      }
      
      .section-content {
        color: #6c757d;
        line-height: 1.8;
        
        p {
          margin: 0;
        }
      }
      
      &.scenes-section {
        .scene-card {
          text-align: center;
          padding: 25px;
          background: #f8f9fa;
          border-radius: 15px;
          height: 100%;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            
            .scene-icon {
              background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
              
              .el-icon {
                color: #fff;
              }
            }
          }
          
          .scene-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 20px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            
            .el-icon {
              font-size: 24px;
              color: #ff6b6b;
            }
          }
          
          h4 {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 12px;
          }
          
          p {
            font-size: 14px;
            color: #6c757d;
            line-height: 1.6;
          }
        }
      }
      
      &.features-section {
        .tech-feature {
          display: flex;
          align-items: flex-start;
          padding: 20px;
          background: #f8f9fa;
          border-radius: 15px;
          margin-bottom: 20px;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateX(5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            
            .feature-icon {
              background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
              
              .el-icon {
                color: #fff;
              }
            }
          }
          
          .feature-icon {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            transition: all 0.3s ease;
            
            .el-icon {
              font-size: 24px;
              color: #ff6b6b;
            }
          }
          
          .feature-content {
            h4 {
              font-size: 18px;
              font-weight: 600;
              color: #2c3e50;
              margin-bottom: 8px;
            }
            
            p {
              font-size: 14px;
              color: #6c757d;
              line-height: 1.6;
              margin: 0;
            }
          }
        }
      }
      
      &.contact-section {
        background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
        text-align: center;
        padding: 40px;
        
        .contact-content {
          color: #fff;
          
          h3 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 15px;
          }
          
          p {
            font-size: 16px;
            opacity: 0.9;
            margin-bottom: 25px;
          }
          
          .contact-btn {
            display: inline-flex;
            align-items: center;
            padding: 12px 30px;
            background: #fff;
            color: #ff6b6b;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            
            span {
              margin-right: 8px;
            }
            
            .el-icon {
              transition: transform 0.3s ease;
            }
            
            &:hover {
              transform: translateY(-3px);
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
              
              .el-icon {
                transform: translateX(5px);
              }
            }
          }
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    :deep(.el-dialog__header) {
      padding: 20px;
      
      .el-dialog__title {
        font-size: 20px;
      }
    }
    
    .solution-detail {
      .detail-section {
        padding: 20px;
        
        .section-header {
          margin-bottom: 20px;
          
          h3 {
            font-size: 18px;
          }
        }
        
        &.scenes-section {
          .scene-card {
            margin-bottom: 20px;
          }
        }
        
        &.contact-section {
          padding: 30px 20px;
          
          .contact-content {
            h3 {
              font-size: 20px;
            }
            
            p {
              font-size: 14px;
            }
            
            .contact-btn {
              padding: 10px 25px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style> 